<!DOCTYPE HTML>

<html ng-app="assignmentList" lang="en">



{{>/head}}


<div class="container">
    <!-- ========================================================================================================= Row 1 -->
    <div class="row">

        <div class="col-md-3"></div> <!--3 Col Filler-->


        <div class="col-md-6">
            <h1 class="logoBigText"><span class="vcu">{{platformId}}</span>.tracks</h1>
        </div>

        <div class="col-md-3"></div> <!--3 Col Filler-->
    </div>
    <!-- ========================================================================================================= /Row 1 -->

    <!-- ========================================================================================================= Row 2 -->
    <div class="row">
        <div class="col-md-2"></div> <!--2 Col Filler-->

            <!-- ========================================================================================================= Platform Thumbnail -->
            <div class=col-md-1>
                <h1 class="logoBigText"><span class="glyphicon glyphicon-th-large"></span></h1>
            </div>
            <!-- ========================================================================================================= /Platform Thumbnail -->

            <!-- ========================================================================================================= Platform information and Description -->
            <div class=col-md-7>
                <p class="androidText"><span class="h3">Platform Name: {{platformName}}</span></p>
                <hr>
                <div class="limitedHeightBox">
                    <P class="vcu">Description:</p>
                    <p>{{description}}</p>
                </div>
            </div>
            <!-- ========================================================================================================= /Platform information and Description -->

        <div class="col-md-2"></div> <!--2 Col Filler-->
    </div>
    <!-- ========================================================================================================= /Row 2 -->

    <!-- ========================================================================================================= Row 3 -->
    <div class ="row">
        <div class="col-md-2"></div> <!--2 Col Filler-->

        <div class="col-md-8">
            <hr>

        	<!-- ========================================================================================================= Track 1 (Will be replaced by track repeat) -->
        	<div id="tracklistcontainer" ng-controller="MainCtrl">
        	    {{#trackList}}
        	    stuff
        	    {{/trackList}}
        	    {{#freeAssignments}}
        	    {{id}} | {{name}} <br>
        	    {{/freeAssignments}}
                {{=[[ ]]=}}
                    <h3>Track 01: Programming in iOS</h3>

                    <p class="androidText">Available Assignments:</p>
                    <div class="alert alert-info availAss">
                        <div class="row">
                        <ul class="list-group" >
                            <li my-draggable="#sortable" class="list-group-item trackard">New Assignment 1</li>
                            <li my-draggable="#sortable" class="list-group-item trackard">New Assignment 2</li>
                            <li my-draggable="#sortable" class="list-group-item trackard">New Assignment 3</li>
                        </ul>
                        </div>
                    </div>

                    <div class="row rowmeo">
                        <ul class="list-group" my-sortable id="sortable" >
                            <li ng-repeat="item in assignments" id="trackardy"  style="display:inline">
                                <div class="list-group-item trackard" style="display:inline">{{item.name}}</div>
                                <img src="/static/img/yellowtrack.png" style="display:inline"></img>
                            </li>
                            <li></li>
                        </ul>
                    </div>

                    <div class="pull-right">
                    <button ng-click="reset()" type="reset" class=" btn btn-primary ">Reset</button>
                        <button
                            type="submit"
                            ng-click=""
                            ng-disabled=""
                            class="  btn btn-success" >Update Track</button>
                    </div>

                    <br>
                    <hr>


                    <!-- ========================================================================================================= admin Panel -->
                    <div class="alert alert-warning">


                            <p>Admin Panel:</p>
                            <pre>{{assignments | json}}</pre>



                    </div>
                    <!-- ========================================================================================================= /admin Panel -->

                 [[={{ }}=]]
            </div>
            <!-- ========================================================================================================= /Track 1 -->




        </div>
    </div>





    </div><!--/row-->
    <!-- ========================================================================================================= /Row 3 -->
</div> <!--/container-->


{{>/foot}}

	<script type="text/javascript">

    var app = angular.module('assignmentList', []);

    app.controller('MainCtrl', function($scope) {
        $scope.assignments = [
          {name:'Assignment 1'},
          {name:'Assignment 2'},
          {name:'Assignment 3'},
          {name:'Assignment 4'},
        ];

        $scope.$on('my-sorted',function(ev,val){
          $scope.assignments.splice(val.to, 0, $scope.assignments.splice(val.from, 1)[0]);
        })

        $scope.$on('my-created',function(ev,val){
          $scope.assignments.splice(val.to, 0,{name:val.name});
        })
    });

    app.directive('mySortable',function(){
    	return {
    		link:function(scope,el,attrs){
    			el.sortable({
    				revert: true
    			});
    			el.disableSelection();

    			el.on( "sortdeactivate", function( event, ui ) {
    				var from = angular.element(ui.item).scope().$index;
    				var to = el.children().index(ui.item);
    				if(to>=0){
    					scope.$apply(function(){
    						if(from>=0){
    							scope.$emit('my-sorted', {from:from,to:to});
    						}else{
    							scope.$emit('my-created', {to:to, name:ui.item.text()});
    							ui.item.remove();
    						}
    					})
    				}
    			});
    		}
    	}
    })

    app.directive('myDraggable',function(){
    	return {
    		link:function(scope,el,attrs){
    			el.draggable({
    				connectToSortable: attrs.myDraggable,
    				helper: "clone",
    				revert: "invalid"
    			});
    			el.disableSelection();
    		}
    	}
    })

	</script>

</html>